<template>
	<view class="page_login">
		<!-- 头部logo -->
		<headLogo/>
		
		<!-- form -->
		<view class="login_form">
			<view class="input">
				<m-input class="m-input" type="number" clearable focus v-model.trim="phoneNo" placeholder="请输入手机号" />
			</view>
			<view class="line" />
			<view class="code " style="">
				<m-input class="m-input" type="number" v-model.trim="code" placeholder="请输入验证码"></m-input>
				<button type="primary" plain="" @click="getCode" v-text='codeText'></button>
			</view>
			<view class="line" />
			<view class="input">
				<m-input type="password" displayable v-model.trim="password" placeholder="请输入登录密码"></m-input>
			</view>
			<view class="line" />
			<view class="tip" style="width:100%;">6-16位，数字、字母或数字字母组合</view>
			<view style="width: 100%;">
				<checkbox-group @change="checkboxChange">
					<label class="checkbox">
						<checkbox value="true" :checked="isAgree" />
						<text class="protocol_tip">我已阅读并同意</text>
					</label>
					<text class="protocol_tip link" @click="openAgreement">《注册服务协议》</text>
				</checkbox-group>
			</view>
		</view>
		
		<!-- 提交 -->
		<view class="btn-row">
		    <button type="primary" class="primary" @tap="register">注册</button>
		</view>
		
	</view>
</template>

<script>
	import mInput from '../../components/m-input.vue'
	import headLogo from './headLogo.vue'
	export default {
		components: { mInput,headLogo},
		data() {
			return {
				phoneNo: '',
				password: '',
				code: '',
				isAgree:false,
				imgInfo: {
					head: '../../static/img/head.png',
				},
				codeText:"获取验证码"
			};
		},
		methods: {
			getCode(){
				if (!this.isAgree) {
				    uni.showToast({icon: 'none',title: '请先阅读并同意注册服务协议'});
				    return;
				}
				if (this.phoneNo.length != 11) {
				    uni.showToast({icon: 'none',title: '手机号码格式不正确'});
				    return;
				}
				uni.showToast({icon: 'none',title: '验证码已发送到手机'});
				this.countDown(60000);
			},
			countDown(time){
				let that= this;
				if(this.codeText=="重新获取" || this.codeText=="获取验证码"){
					let i=0;
					function  _timing(){
						setTimeout(function(){
							i+= 1000;
							if(i != time){
								that.codeText = (time-i) / 1000 +"秒后失效";
								_timing();
							}else{
								that.codeText="重新获取";
							}
						}, 1000);	
					}
					_timing();
				}
			},	
			openAgreement(){
				var that=this;
				uni.showModal({
					title:"《注册服务协议》",
					content:"萨达爱神的箭萨达发康师傅三方查看撒发 实打实咖啡店把伤口飞洒科技部撒可富ssdsad萨达爱神的箭萨达发康师傅三方查看撒发 实打实咖啡店把伤口飞洒科技部撒可富ssdsad萨达爱神的箭萨达发康师傅三方查看撒发 实打实咖啡店把伤口飞洒科技部撒可富ssdsad萨达爱神的箭萨达发康师傅三方查看撒发 实打实咖啡店把伤口飞洒科技部撒可富ssdsad萨达爱神的箭萨达发康师傅三方查看撒发 实打实咖啡店把伤口飞洒科技部撒可富ssdsad萨达爱神的箭萨达发康师傅三方查看撒发 实打实咖啡店把伤口飞洒科技部撒可富ssdsad萨达爱神的箭萨达发康师傅三方查看撒发 实打实咖啡店把伤口飞洒科技部撒可富ssdsad萨达爱神的箭萨达发康师傅三方查看撒发 实打实咖啡店把伤口飞洒科技部撒可富ssdsad萨达爱神的箭萨达发康师傅三方查看撒发 实打实咖啡店把伤口飞洒科技部撒可富ssdsad萨达爱神的箭萨达发康师傅三方查看撒发 实打实咖啡店把伤口飞洒科技部撒可富",
					showCancel:true,
					cancelText:"取消",
					confirmText:"同意",
					success(res){
						if(res.confirm){
							that.isAgree=true;
						}else{
							that.isAgree=false;
						}
					}
				})
			},
			checkboxChange(res){
				this.isAgree = res.detail.value[0] || false;
			},
			register() {
				if (!this.isAgree) {
				    uni.showToast({icon: 'none',title: '请先阅读并同意注册服务协议'});
				    return;
				}
				if (this.phoneNo.length != 11) {
				    uni.showToast({icon: 'none',title: '手机号码格式不正确'});
				    return;
				}
				if (this.code < 4) {
				    uni.showToast({ icon: 'none',title: '验证码不正确'});
				    return;
				}
				if (!this.password) {
				    uni.showToast({ icon: 'none',title: '请输入登录密码'});
				    return;
				}
				if (this.password.length<6 || this.password.length>16) {
				    uni.showToast({icon: 'none',title: '密码不能少于6个字符数大于16'});
				    return;
				}
				
				
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import 'login.scss';
	uni-modal .uni-modal{
		width: 90%;
		text-align: left;
		font-size: 14px;
		line-height: 1.8
	}
	.login_form {
		border-bottom:none; 
	}
	.tip {
		margin-top: 10px;
		font-size: 13px;
		color: $text-color;
	}
	.link {
		color: #3a8de8;
		font-size:42upx; 
	}
</style>
